<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期实例</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>

    <script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "hi vue",
        },
        // 在实例初始化之后，数据观测（data observer）和 event/watcher 事件配置之前被调用。
        beforeCreate: function(){
            console.log('beforeCreate');
        },
        // 在实例创建完成后被立即调用。
        // 在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event 事件回调。
        // 然而，挂载阶段还没开始，$el 属性目前不可见。
        beforeMount: function(){
            console.log('beforeMount');
        },
        // el 被新创建的 vm.$el 替换，挂载成功
        mounted: function(){
            console.log('mounted');
        },
        // 数据更新时调用
        beforeUpdate: function(){
            console.log('beforeUpdate');
        },
        // 组件 DOM 已经更新，组件更新完毕
        updated: function(){
            console.log('updated');
        }
    });
    // 过了三秒之后修改 msg 的内容，会看到控制台输出的内容
    setTimeout(function(){
        vm.msg = "change ......";
    }, 3000);
    </script>
</body>
</html>